<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li {
				list-style-type: none;
				float: left;
				padding: 0px 20px;
			}

			.cur {
				color: red;
			}

			.clearfix::after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			div {
				display: none;
			}
		</style>
	</head>
	<body>
		<ul class="clearfix">
			<li>首页</li>
			<li>选课中心</li>
			<li>讲师团队</li>
			<li>意见反馈</li>
		</ul>
		<div>首页</div>
		<div>选课中心</div>
		<div>讲师团队</div>
		<div>意见反馈</div>
		<script type="text/javascript">
			var li = document.querySelectorAll("li");
			var div = document.querySelectorAll("div");
			li.forEach(function(val, index) {
				val.addEventListener('mousemove', function(e) {

					for (var i = 0; i < div.length; i++) {
						div[i].style.display = "none";
					}

					this.className = "cur";

					div[index].style.display = 'block';
				});

				val.addEventListener('mouseout', function(e) {
					this.className = "";
				})
			})
		</script>
	</body>
</html>
